<template>
	<view class="home-page">
		<u-navbar class="home-seach-box" :is-back="false" :background="background" back-icon-color="#fff">
			<view class="home-top">
				<view class="home-seach" @click="goSearch">
					<u-icon size="32" color="#BFBFBF" name="search" class="home-seach-icon"></u-icon>
					<view class="home-seach-pl">搜索店内商品</view>
				</view>
				<!-- <view class="home-conpon"  @click="showCoupon1 = true">领券</view> -->
			</view>
		</u-navbar>
		<view class="home-swiper-box" v-if="storeAdvList.length>0">
			<view class="home-swiper">
				<u-swiper :list="storeAdvList" img-mode="scaleToFill" height="180"  border-radius="16"></u-swiper>
			</view>
		</view>
		<view class="home-store">
			<view class="store-info">
				<view class="store-img-box">
					<Img :src="storeDetail.storeLogo" :customStyle="{width:'96rpx',height:'96rpx',borderRadius:'16rpx'}"  class="store-img"/>
				</view>
				<view class="store-name">
					<view class="name-addr">{{storeDetail.storeName}}</view>
					<view class="store-tip">{{storeDetail.storeServiceTime}}</view>
				</view>
				<view class="store-btn" @click="goPage">
					<text class="qh-text">店铺切换</text><image class="qh-img" src="../../static/qh.png"></image>
				</view>
			</view>
			<activity v-if="firstFlag" :storeInfo="storeDetail" @showActivity="handleShowActivity" />
		</view>
		<!-- <u-sticky offset-top="200"> -->
			<view class="sort-box" v-if="!showActivityKey">
				<view class="sort-left">
					<view :class="['label-item',i===activeLabelIndex?'active':'']" v-for="(item,i) in storeClassList" :key="i" @click="changeClass(item,i)">{{item.gcName}}</view>	
				</view>
				<view class="sort-right">
					<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="scrollLower">
						<view class="goods-item" v-for="(item,i) in storeGoodsList.data" :key="i" @click="goGoodsPage(item)">
							<view class="goods-img-box">
								<Img :src="item.goodsImage" :customStyle="{width:'160rpx',height:'160rpx',borderRadius:'8rpx'}"  class="goods-img"/>
							</view>
							<view class="goods-info">
								<view class="goods-name">{{item.goodsName}}</view>
								<view class="goods-remark">{{item.brandName}}</view>
								<view class="goods-activity-label">
									<view v-if="item.activityType" class="u-line-1 u-tips-color u-font-22 u-m-t-8">
										<tag :couponShowType="2" :activityType="item.activityType" :couponList="item.couponList" />
									</view>
								</view>
								
								<view class="goods-price">
									<price :price="item.goodsPrice" :taxPrice="item.goodsCostPrice" />
								</view>
								<view class="add-icon" @click.stop><add-cart :goods="item"/></view>
							</view>
						</view>	
						<u-loadmore :status="storeGoodsLoadingStatus" margin-top="30"/>
					</scroll-view>
				</view>
			</view>
		<!-- </u-sticky> -->
		<cart v-if="firstFlag && !showActivityKey" />
		<u-mask :show="showMask" z-index="998">
			<view class="maskLoading"><u-loading mode="circle" color="#fff" size="46"></u-loading></view>
		</u-mask>
	</view>
	
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import Img from '@/components/goods/img.vue'
	import cart from "@/components/cart/cart.vue"
	import addCart from '@/components/goods/addCart.vue'
	import activity from "@/components/home/activity.vue"
	import tag from '@/components/activity/tag.vue'
	import price from '@/components/goods/price.vue'
	export default {
		components:{ Img,addCart,cart,activity,tag,price },
		data() {
			return {
				background: {
					backgroundColor: '#00CBCB',
				},
				activeLabelIndex:0,
				status: 'loadmore',
				storeId:uni.getStorageSync('storeId'),
				condition:{
					storeId:uni.getStorageSync('storeId'),
					current:1,
					size:20,
					gcIdpath:''
				},
				showActivityKey:false,
				firstFlag:false,
				showMask:true
			}
		},
		onLoad(option) {
			console.log(option.storeId)
			option.storeId?uni.setStorageSync('storeId',option.storeId):'';
			if (!uni.getStorageSync('token')) {
				this.$u.route({
					url: 'pages/user/login',
					type:'redirect'
				})
			}else if (!uni.getStorageSync('storeId')) {
				this.$u.route({
					url: 'pages/store/index',
					type:'switchTab'
				})
			}else {
				this.getStoreDetail()
				this.getStoreClass()
				this.getStoreAdv()
				this.firstFlag = true
			}
		},
		computed:{
			...mapState({
				storeDetail: state => state.shop.storeDetail,
				storeClassList: state => state.shop.storeClassList,
				storeAdvList: state => state.shop.storeAdvList,
				storeGoodsList: state => state.shop.storeGoodsList,
				storeGoodsLoadingStatus: state => state.shop.storeGoodsLoadingStatus
			})
		},
		methods: {
			...mapActions(['ActGetStoreDetail','ActGetStoreClassList','ActGetStoreAdvList','ActGetStoreGoodsList','ActGetCartCount']),
			async getStoreDetail(){
				await this.ActGetStoreDetail({storeId:this.storeId})
				if (this.storeDetail) {
					uni.setStorageSync('storeInfo',this.storeDetail);
					this.showMask = false
				}
			},
			async getStoreClass(){
				await this.ActGetStoreClassList({storeId:this.storeId})
				if (this.storeClassList&&this.storeClassList[0]&&this.storeClassList[0].gcId) {
					this.condition.gcIdpath = this.storeClassList[0].gcId === '全部'?'' : this.storeClassList[0].gcId
					this.getStoreGoodsList(this.condition)
				}
				// this.getStoreGoodsList()
			},
			async getStoreAdv(){
				await this.ActGetStoreAdvList({storeId:this.storeId,apKey:'Top'})
			},
			async getStoreGoodsList(){
				await this.ActGetStoreGoodsList(this.condition)
			},
			changeClass(item,i){
				if (this.activeLabelIndex!==i) {
					this.activeLabelIndex = i
					this.condition.current = 1
					this.condition.gcIdpath = item.gcId === '全部'?'' : item.gcId
					this.getStoreGoodsList(this.condition)
				}
			},
			scrollLower(){
					if (this.storeGoodsLoadingStatus==='loadmore'&&this.condition.current<this.storeGoodsList.pages) {
						this.condition.current = this.condition.current + 1
						this.getStoreGoodsList(this.condition)
					}
			},
			goSearch() {
				this.$u.route({
					url:"pages/goods/goodsSearch",
					// params:{
					// 	keyword:this.options.keyword
					// }
				})
			},
			goGoodsPage(item){
				this.$u.route({
					url: 'pages/goods/detail',
					params: {
						id: item.goodsId
					}
				})
			},
			goPage(){
				this.$u.route({
					url: 'pages/store/index',
					type:'switchTab'
				})
			},
			handleShowActivity(e){
				this.showActivityKey = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-page{
		background: #F6F6F6;
	}
	.home-top{
		padding-left: 30rpx;
		display: flex;
		align-items: center;
		flex: 1;
	}
	.home-seach{
		width:340rpx;
		border-radius: 250rpx;
		background: #FFFFFF;
		height:64rpx;
		display: flex;
		align-items: center;
	}
	.home-seach-icon{
		margin-left:20rpx;
		margin-right:12rpx;
	}
	.home-seach-pl{
		color: #BFBFBF;
		font-size: 28rpx;
	}
	.home-conpon{
		background: linear-gradient(111.42deg, #FF6B00 0%, #F90F00 100%);
		height:48rpx;
		width:76rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 22rpx;
		color:#fff;
		margin-left:24rpx;
		overflow: hidden;
		position: relative;
	}
	.home-conpon:before,.home-conpon:after{
		content: '';
		position: absolute;
		background-color: #0D95FF;
		border-radius: 50%;
		display: block;
		width:16rpx;
		height:16rpx;
		top:16rpx;
	}
	.home-conpon:before{
		left:-8rpx;
	}
	.home-conpon:after{
		right:-8rpx;
	}
	.home-swiper-box{
		background: #F6F6F6;
		padding:24rpx;
		padding-bottom: 12rpx;
	}
	.home-swiper{
		width:700rpx;
		height:180rpx;
		margin:0 auto;
	}
	.home-store{
		padding:24rpx;
		border-radius: 8px 8px 0px 0px;
		background: #FFFFFF;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #F6F6F6;;
	}
	.store-info{
		display: flex;
	}
	.store-name{
		flex:1;
		margin-left:16rpx;
		margin-right: 10rpx;
	}
	.name-addr{
		color:$u-main-color;
		font-size: 28rpx;
		font-weight: 700;
		line-height: 36rpx;
		margin-bottom: 8rpx;
	}
	.store-tip{
		color:$u-tips-color;
		font-size: 24rpx;
		line-height: 36rpx;
	}
	.store-btn{
		color:$u-tips-color;
		font-size: 24rpx;
		display: flex;
		// align-items: center;
		.qh-text{
			line-height: 36rpx;
		}
		.qh-img{
			width:32rpx;
			height:32rpx;
			vertical-align: middle;
			margin-left: 4rpx;
		}
	}
	.store-img-box{
		width:96rpx;
		height:96rpx;
		border-radius:16rpx;
		overflow: hidden;
	}
	.store-img{
		width:96rpx;
		height:96rpx;
	}
	.coupon-list{
		display: flex;
		margin-top:20rpx;
		margin-bottom: 20rpx;
	}
	.conpon-item{
		background: linear-gradient(111.42deg, #FF6B00 0%, #F90F00 100%);
		height:32rpx;
		padding:0 8rpx;
		text-align: center;
		line-height: 32rpx;
		font-size: 22rpx;
		color:#fff;
		margin-right:16rpx;
		overflow: hidden;
		position: relative;
	}
	.conpon-item:before,.conpon-item:after{
		content: '';
		position: absolute;
		background-color: #fff;
		border-radius: 50%;
		display: block;
		width:8rpx;
		height:8rpx;
		top:12rpx;
	}
	.conpon-item:before{
		left:-4rpx;
	}
	.conpon-item:after{
		right:-4rpx;
	}
	.activity-explain{
		display: flex;
		color:$u-content-color;
		font-size: 24rpx;
	}
	.activity-intro{
		flex:1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right:10rpx;
	}
	.activity-icon{
		margin-left:14rpx;
	}
	.sort-box{
		display: flex;
		height:100vh;
		padding-bottom:100rpx;
	}
	.sort-left{
		width:160rpx;
		height:100%;
		overflow: auto;
		background-color:$u-bg-color ;
	}
	.sort-right{
		flex:1;
		height:100%;
		overflow-y: auto;
		overflow-x: hidden;
		background: #fff;
	}
	.label-item{
		height:96rpx;
		line-height: 96rpx;
		text-align: center;
		background-color: $u-bg-color;
		position: relative;
		font-size: 26rpx;
	}
	.label-item.active{
		background: #FFFFFF;
		color: $u-type-primary;
		font-weight: 700;
	}
	.label-item.active:before{
		content: '';
		display: block;
		background: $u-type-primary;
		width:6rpx;
		height:28rpx;
		left:0;
		top:34rpx;
		position: absolute;
	}
	.goods-item{
		/* height:260rpx; */
		padding:24rpx 24rpx 22rpx;
		display: flex;
		overflow: hidden;
		align-items: flex-start;
		width:100%;
		.goods-activity-label{
			display: flex;
			margin-top:10rpx;
			margin-bottom: 10rpx;
			// height:32rpx;
			align-items:center;
			overflow: hidden;
			flex-wrap:wrap;
		}
	}
	.goods-img-box{
		width:160rpx;
		height:160rpx;
		margin-right:20rpx;
	}
	.goods-info{
		flex: 1;
		overflow: hidden;
	}
	.goods-name{
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: -webkit-box;
	  -webkit-line-clamp: 2;
	  line-clamp: 2;
	  -webkit-box-orient: vertical;
	  width:100%;
	  font-size: 30rpx;
	  color:$u-main-color;
	  line-height: 40rpx;
	  font-weight: 700;
	}
	.goods-remark{
		width:100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color:$u-tips-color;
		margin-top:16rpx;
	}
	.goods-num{
		font-size: 22rpx;
		color:$u-tips-color;
		margin-top:14rpx;
		margin-bottom: 18rpx;
	}
	.goods-price{
		position: relative;
	}
	.now-price{
		color: $u-type-error;
		font-size: 24rpx;
		font-weight: 700;
	}
	.before-price{
		color:$u-tips-color;
		font-size: 24rpx;
		margin-left:8rpx;
		text-decoration:line-through;
		position: relative;
		// top:6rpx;
	}
	.add-icon{
		// position: absolute;
		// right:0;
		// top:-12rpx;
		display: flex;
		justify-content: flex-end;
	}
	.pop-content-box{
		height:100%;
		overflow-y: auto;
		.pop-body{
			padding:0 24rpx;
			.coupon-class{
				margin-bottom:48rpx;
				.coupon-class-name{
					margin-bottom: 24rpx;
					font-size:26rpx;
					color:$u-main-color;
					font-weight: 700;
				}
				.coupon-box{
					.coupon-item{
						overflow: hidden;
						position: relative;
						margin-bottom:16rpx;
						&:before,&:after{
							content: '';
							display: block;
							width:20rpx;
							height:20rpx;
							border-radius: 50%;
							// border:1rpx solid $u-type-error;
							border: 1px solid rgba(255,79,57,0.20);
							position: absolute;
							right:168rpx;
							background-color: #fff;
						}
						&:before{
							top:-10rpx;
						}
						&:after{
							bottom:-10rpx;
						}
						.coupon-item-border{
							display: flex;
							background-color: #FFF7E9;
							border-radius: 8rpx;
							// border:1rpx solid $u-type-error;
							border: 1px solid rgba(255,79,57,0.20);
							padding:8rpx 16rpx 8rpx 8rpx;
							.coupon-left{
								width:200rpx;
								height:160rpx;
								display: flex;
								flex-direction:column;
								align-items: center;
								justify-content: center;
								text-align: center;
								color:#fff;
								background-color: $u-type-error;
								border-radius: 8rpx;
								.left-top{
									margin-bottom:10rpx;
									.price-sign{
										font-size: 24rpx;
									}
									.price-val{
										font-size: 44rpx;
										font-weight: 700;
									}
								}
								.left-bottom{
									font-size: 24rpx;
								}
							}
							.coupon-center{
								flex:1;
								padding-left:16rpx;
								display: flex;
								flex-direction:column;
								// align-items: center;
								justify-content: center;
								.coupon-type{
									font-size: 32rpx;
									color:$u-main-color;
									font-weight: 700;
									margin-bottom: 32rpx;
								}
								.coupon-tip{
									font-size: 24rpx;
									color:$u-content-color;
								}
							}
							.coupon-right{
								padding-top:48rpx;
								padding-left:16rpx;
								// border-left:1rpx dashed $u-type-error;
								border-left: 1px dashed rgba(255,79,57,0.20);
								.coupon-btn{
									width:146rpx;
									height:64rpx;
									border-radius: 86rpx;
									text-align: center;
									line-height: 64rpx;
									font-size: 24rpx;
									color:#fff;
								}
								.coupon-btn-can{
									background-color: $u-type-error;
								}
								.coupon-btn-no{
									background-color: $u-tips-color;
								}
							}
						}
					}
				}
			}
			.coupon-more{
				text-align: center;
				padding-bottom: 48rpx;
				color:$u-content-color;
				font-size: 24rpx;
			}
		}
		.pop-content-title{
			width:100%;
			text-align: center;
			font-size: 32rpx;
			color:$u-main-color;
			font-weight: 700;
			padding-top:32rpx;
			padding-bottom: 40rpx;
		}
		.activity-list{
			display: flex;
			margin-bottom:16rpx;
		}
	}
	.pop-content{
		// height:3000rpx;
	}
	.home-bottom{
		position: fixed;
		bottom:0;
		left:0;
		right:0;
		width:100%;
		background-color: #fff;
		z-index: 99;
		display: flex;
		align-items: center;
		height:98rpx;
		padding:0 24rpx;
	}
	.cart-icon-box{
		width:72rpx;
		height:72rpx;
		position: relative;
	}
	.cart-sum{
		background: $u-tips-color;
		position: absolute;
		top:-8rpx;
		right:-8rpx;
		min-width:32rpx;
		height:32rpx;
		color:#fff;
		font-size: 24rpx;
		border-radius: 16rpx;
		padding:0 6rpx;
		text-align: center;
		line-height: 32rpx;
	}
	.cart-price-box{
		flex:1;
		margin-left:16rpx;
	}
	.now-sum{
		color: $u-type-error;
		font-size: 32rpx;
		font-weight: 700;
	}
	.before-sum{
		font-size: 24rpx;
		color:$u-tips-color;
		text-decoration: line-through;
		position: relative;
		margin-left: 6rpx;
	}
	.cart-btn{
		border-radius: 136rpx;
		background: $u-tips-color;
		height:72rpx;
		width:168rpx;
		text-align: center;
		line-height: 72rpx;
		color:#fff;
	}
	.cart-btn-can{
		background: $u-type-error;
	}
	.activity-type{
		background: linear-gradient(115.04deg, #F16500 0%, #FF0000 100%);
		height:32rpx;
		line-height: 32rpx;
		border-radius: 4rpx;
		color:#fff;
		margin-right:16rpx;
		padding:0 8rpx;
		font-size: 24rpx;
	}
	.activity-text{
		flex: 1;
		font-size: 24rpx;
		color:$u-content-color;
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
	}
	.maskLoading{
		// position: ab;
		// top:40%;
		// z-index: 99;
		width:50rpx;
		height:50rpx;
		margin:0 auto;
		margin-top:55%;
	}
</style>
